<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <h2 class="io-goods-detail">
                基础信息
            </h2>
            <template>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6"><div class="grid-content bg-purple">采购单号:{{detail.purchaseSn}}</div></el-col>
                    <el-col :span="6">
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 1">采购状态: 待处理</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 2">采购状态: 待审核</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 3">采购状态: 采购中</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 4">采购状态: 备货中</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 5">采购状态: 已揽货</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 6">采购状态: 采购完成</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 7">采购状态: 部分完成</div>
                      <div class="grid-content bg-purple-light" v-if="detail.purchaseStatus == 8">采购状态: 已关闭</div>
                    </el-col>
                    <el-col :span="6" v-if="detail.purchaseOrderType == 1"><div class="grid-content bg-purple"></div>采购类型:采购计划</el-col>
                    <el-col :span="6" v-if="detail.purchaseOrderType == 2"><div class="grid-content bg-purple"></div>采购类型:按需采购</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>供应商名称:{{supplierName}}</el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6"><div class="grid-content bg-purple-light">采购截止时间:{{detail.buyFinalTime}} </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>采购员:{{transactorName}}</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>制单人:</el-col>
                </el-row>
            </template>
        </basic-container>
        <basic-container>
            <h2 class="io-goods-detail">
                待入库商品清单
            </h2>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                    <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                    <el-table-column label="商品图片" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.goodsImg" height="50px"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品" prop="goodsName" align="center"></el-table-column>
                    <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                    <el-table-column label="商品数量" prop="needBuyNum" align="center"></el-table-column>
                    <el-table-column label="商品单价" prop="marketPrice" align="center"></el-table-column>
                    <el-table-column label="采购状态" align="center">
                      <template slot-scope="scope">
                        <div v-if="scope.row.purchaseStatus == 1">待处理</div>
                        <div v-if="scope.row.purchaseStatus == 2">待审核</div>
                        <div v-if="scope.row.purchaseStatus == 3">采购中</div>
                        <div v-if="scope.row.purchaseStatus == 4">备货中</div>
                        <div v-if="scope.row.purchaseStatus == 5">已揽货</div>
                        <div v-if="scope.row.purchaseStatus == 6">采购完成</div>
                        <div v-if="scope.row.purchaseStatus == 7">部分完成</div>
                        <div v-if="scope.row.purchaseStatus == 8">已关闭</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="金额小计"  align="center"><template slot-scope="scope"><span>{{ scope.row.needBuyNum*scope.row.marketPrice }}</span></template></el-table-column>
                    <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
                </el-table>
                <div>
                    <!-- <h3 class="settle-accounts">其它费用:{{otherMoney}}</h3> -->
                    <h3 class="settle-accounts">合计金额:{{calcMoney.toFixed(2)}}</h3>
                </div>
            </template>
            <template>
                <div class="return-btn">
                    <el-button type="primary" plain @click="backup">返回</el-button>
                </div>
            </template>
        </basic-container>
        <!-- <basic-container>
            <h2 class="io-goods-detail">
                单据操作历史
            </h2>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                    <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                    <el-table-column label="操作时间" prop="updateDate" align="center"></el-table-column>
                    <el-table-column label="操作人" prop="createBy" align="center"></el-table-column>
                    <el-table-column label="类型" prop="type" align="center"></el-table-column>
                    <el-table-column label="日志" prop="remarks" align="center"></el-table-column>
                </el-table>
            </template>

        </basic-container> -->
    </div>
</template>
<!-- 采购退货 -->
<script>
    import {
        fetchList,
        queryList,
        getDetail,
    } from '@/api/scm/purchase/purchase_order'
    import {
        tableOption
    } from '@/const/crud/scm/purchase/purchase_order'
    import {
        mapGetters
    } from 'vuex'
    import {getStore, setStore} from "@/util/store";
    import Util from '@/util/pds/utils';
    let cookieUtil = new Util();
    export default {
        name: 'addpurchaseback',
        data() {
            return {
                tableData: [],
                //otherMoney:100,
                calcMoney:0,
                detail:'',
                supplierName:'',
              transactorName:''
            }
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        created(){
            this.getNew();
        },
        methods:{
            backup:function () {
                this.$router.go(-1);
            },
            getNew(){
                let params = {
                    purchaseSn: this.$route.query.purchaseSn,
                    pmId:getStore({name: "pmId"})
                }
                getDetail(params).then(response => {
                    this.detail = response.data.data;
                    this.tableData = response.data.data.detailList;
                    response.data.data.detailList.forEach(item =>{
                        this.supplierName = item.supplierName;
                        this.transactorName = item.transactorName;
                        this.calcMoney += parseFloat(item.needBuyNum*item.marketPrice);
                    });
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .io-goods-detail{
        margin-botom: 10px;
    }
    .settle-accounts{
        text-align: right;
        padding-top: 10px;
    }
    .basic-information {
        margin-top: 20px;
        font-weight: inherit;
    }
    .return-btn{
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }
</style>
